<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流检测测试 - 华为云直播页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .test-section {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .success {
            background: #d4edda;
            border-color: #c3e6cb;
            color: #155724;
        }
        .warning {
            background: #fff3cd;
            border-color: #ffeaa7;
            color: #856404;
        }
        .info {
            background: #d1ecf1;
            border-color: #bee5eb;
            color: #0c5460;
        }
        .code {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 3px;
            padding: 10px;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            white-space: pre-wrap;
            word-break: break-all;
        }
        .stream-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        .stream-card {
            background: white;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 15px;
        }
        .download-links {
            margin-top: 10px;
        }
        .download-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 5px;
        }
        .download-btn:hover {
            background: #0056b3;
        }
        .quality-tag {
            background: #28a745;
            color: white;
            padding: 2px 8px;
            border-radius: 3px;
            font-size: 12px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <h1>🎯 Vhall Stream Saver - 流检测测试</h1>

    <div class="test-section success">
        <h2>✅ 测试目标</h2>
        <p><strong>目标网页：</strong> <a href="https://bbs.huaweicloud.com/live/cloud_live/202509051500.html" target="_blank">https://bbs.huaweicloud.com/live/cloud_live/202509051500.html</a></p>
        <p><strong>测试状态：</strong> 成功检测到微吼直播流！</p>
    </div>

    <div class="test-section info">
        <h2>📊 检测结果</h2>
        <p>通过Playwright分析，成功捕获到以下关键信息：</p>

        <div class="stream-info">
            <div class="stream-card">
                <h3>🎬 直播信息</h3>
                <p><strong>标题：</strong> 一键搞定华为云万级资源，3步轻松管理企业成本</p>
                <p><strong>房间ID：</strong> 15849</p>
                <p><strong>Webinar ID：</strong> cf5fb15d</p>
                <p><strong>App ID：</strong> aa661b39</p>
                <p><strong>状态：</strong> <span class="quality-tag">直播回放</span></p>
            </div>

            <div class="stream-card">
                <h3>🔗 API请求</h3>
                <p><strong>检测到关键API：</strong></p>
                <div class="code">https://gslb.e.vhall.com/api/dispatch_replay?app_id=aa661b39&webinar_id=cf5fb15d&uid=33706108&bu=1&rand=634267721&uri=%2Fvhallyun%2Fvhallrecord%2Fcf5fb15d%2F20250909161236_cf5fb15d%2Frecord.m3u8&quality=%5B%22same%22%2C%22a%22%2C%221080p%22%2C%22480p%22%2C%22360p%22%2C%22720p%22%5D</div>
            </div>
        </div>
    </div>

    <div class="test-section success">
        <h2>🎥 获取到的下载链接</h2>
        <p><strong>HLS主播放列表：</strong></p>
        <div class="code">https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record.m3u8?token=E947736E_NjM0MjY3NzIxXzY5MDVBMjREX1kyWTFabUl4TldRX016TTNNRFl4TURnX3ZvZA</div>

        <p><strong>支持的质量：</strong></p>
        <div>
            <span class="quality-tag">same</span>
            <span class="quality-tag">a</span>
            <span class="quality-tag">1080p</span>
            <span class="quality-tag">480p</span>
            <span class="quality-tag">360p</span>
            <span class="quality-tag">720p</span>
        </div>

        <div class="download-links">
            <h3>📥 下载命令（yt-dlp）</h3>
            <div class="code">yt-dlp --referer "https://bbs.huaweicloud.com/live/cloud_live/202509051500.html" "https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record.m3u8?token=E947736E_NjM0MjY3NzIxXzY5MDVBMjREX1kyWTFabUl4TldRX016TTNNRFl4TURnX3ZvZA"</div>

            <button class="download-btn" onclick="copyCommand()">📋 复制命令</button>
            <button class="download-btn" onclick="testStream()">▶️ 测试播放</button>
        </div>
    </div>

    <div class="test-section info">
        <h2>🔧 插件兼容性分析</h2>
        <div class="stream-info">
            <div class="stream-card">
                <h3>✅ 兼容性良好</h3>
                <ul>
                    <li>页面使用标准的微吼API (<code>gslb.e.vhall.com</code>)</li>
                    <li>API响应格式与插件预期一致</li>
                    <li>包含完整的HLS域名信息</li>
                    <li>Token认证机制正常工作</li>
                </ul>
            </div>

            <div class="stream-card">
                <h3>⚠️ 注意事项</h3>
                <ul>
                    <li>这是一个回放视频，不是实时直播</li>
                    <li>Token有时间限制，需要及时下载</li>
                    <li>部分质量选项可能不可用</li>
                    <li>需要正确的Referer头才能访问</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="test-section warning">
        <h2>📋 测试步骤</h2>
        <ol>
            <li><strong>安装插件：</strong> 在Chrome中加载 build 目录</li>
            <li><strong>配置Native Host：</strong> 运行 ./install.sh 并更新扩展ID</li>
            <li><strong>访问目标页面：</strong> <a href="https://bbs.huaweicloud.com/live/cloud_live/202509051500.html" target="_blank">华为云直播页面</a></li>
            <li><strong>查看检测结果：</strong> 点击插件图标查看检测到的流</li>
            <li><strong>测试下载：</strong> 选择质量并开始下载</li>
            <li><strong>验证修复：</strong> 确认不会出现重复提示</li>
        </ol>
    </div>

    <script>
        function copyCommand() {
            const command = `yt-dlp --referer "https://bbs.huaweicloud.com/live/cloud_live/202509051500.html" "https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record.m3u8?token=E947736E_NjM0MjY3NzIxXzY5MDVBMjREX1kyWTFabUl4TldRX016TTNNRFl4TURnX3ZvZA"`;

            navigator.clipboard.writeText(command).then(() => {
                alert('✅ 下载命令已复制到剪贴板！');
            }).catch(err => {
                console.error('复制失败:', err);
                alert('❌ 复制失败，请手动复制');
            });
        }

        function testStream() {
            const videoUrl = "https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record.m3u8?token=E947736E_NjM0MjY3NzIxXzY5MDVBMjREX1kyWTFabUl4TldRX016TTNNRFl4TURnX3ZvZA";
            window.open(videoUrl, '_blank');
        }

        // 模拟插件检测结果
        const mockStreamData = {
            id: 'stream_' + Date.now(),
            token: 'E947736E_NjM0MjY3NzIxXzY5MDVBMjREX1kyWTFabUl4TldRX016TTNNRFl4TURnX3ZvZA',
            referer: 'https://bbs.huaweicloud.com/live/cloud_live/202509051500.html',
            expired_datetime: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
            hls_domainnames: {
                'same': 'https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record.m3u8?token=E947736E_NjM0MjY3NzIxXzY5MDVBMjREX1kyWTFabUl4TldRX016TTNNRFl4TURnX3ZvZA',
                '1080p': 'https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record.m3u8?token=E947736E_NjM0MjY3NzIxXzY5MDVBMjREX1kyWTFabUl4TldRX016TTNNRFl4TURnX3ZvZA',
                '720p': 'https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record.m3u8?token=E947736E_NjM0MjY3NzIxXzY5MDVBMjREX1kyWTFabUl4TldRX016TTNNRFl4TURnX3ZvZA',
                '480p': 'https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record.m3u8?token=E947736E_NjM0MjY3NzIxXzY5MDVBMjREX1kyWTFabUl4TldRX016TTNNRFl4TURnX3ZvZA',
                '360p': 'https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record.m3u8?token=E947736E_NjM0MjY3NzIxXzY5MDVBMjREX1kyWTFabUl4TldRX016TTNNRFl4TURnX3ZvZA'
            },
            video_title: '一键搞定华为云万级资源，3步轻松管理企业成本',
            page_url: 'https://bbs.huaweicloud.com/live/cloud_live/202509051500.html',
            detected_at: new Date().toISOString()
        };

        console.log('模拟流数据:', mockStreamData);
    </script>
</body>
</html>